import React, {Component} from 'react';
import {
  ViewPropTypes,
  Text,
  StatusBar,
  StyleSheet,
  View,
  Platform,
  DeviceInfo,
} from 'react-native';
import {PropTypes} from 'prop-types';

import AntDesign from 'react-native-vector-icons/AntDesign';

const is_ios = Platform.OS === 'ios';
const is_android = Platform.OS === 'android';
const NAV_BAR_HEIGHT_IOS = 44; // 导航栏在iOS中的高度
const NAV_BAR_HEIGHT_ANDROID = 50; // 导航栏在Android中的高度

// 状态栏的高度, 如果是IPhoneX就不需要了, 在SafeAreaViewPlus中已经添加了
const STATUS_BAR_HEIGHT = DeviceInfo.isIPhoneX_deprecated ? 0 : 20;

// 设置状态栏所接受的属性
const StatusBarShape = {
  barStyle: PropTypes.oneOf(['light-content', 'default']),
  hidden: PropTypes.bool,
  backgroundColor: PropTypes.string,
};

/**
 * @description 导航航栏组件
 */
export default class BNavigationBar extends Component {
  static defaultProps = {
    statusBar: {
      barStyle: 'dark-content',
      hidden: false,
      backgroundColor: '#fff',
    },
    titleColor: '#fff',
  };

  render() {
    let statusBar = (
      <View style={styles.statusBar}>
        <StatusBar {...this.props.statusBar} />
      </View>
    );

    let backButton = (
      <AntDesign
        onPress={() => {
          if (this.props.onClickLeftButton) {
            this.props.onClickLeftButton();
          } else {
            this.props.navigation.goBack();
          }
        }}
        name="arrowleft"
        size={20}
        style={{ color: '#666', paddingLeft: 10, }}
      />
    )

    let content = this.props.hide ? null : (
      <View style={styles.navBar}>
        { backButton }
        <View
          style={[styles.navBarTitleContainer, this.props.titleLayoutStyle]}>
          <Text
            style={{
              fontSize: 16,
            }}>
            {this.props.title}
          </Text>
        </View>
      </View>
    );

    return (
      <View style={[styles.container, this.props.style]}>
        {statusBar}
        {content}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    borderBottomWidth: 0.5,
    borderColor: '#ddd',
    backgroundColor: '#fff',
  },
  navBarButton: {
    alignItems: 'center',
  },
  navBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: is_ios ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
  },
  navBarTitleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    left: 40,
    right: 40,
    top: 0,
    bottom: 0,
  },
  title: {
    fontSize: 20,
    color: 'white',
  },
  statusBar: {
    height: is_ios ? STATUS_BAR_HEIGHT : 0,
  },
});
